/**
 *
 * PocketMine Server Manager design
 * 
 * @author Ad5001
 * @version 1.0.0
 * @license NTOSL (Custom) - View LICENSE.md in the root of the project
 * @copyright (C) Ad5001 2017
 * @package PocketMine Server Manager
 *
 */


/*=============================================
=            Generic elements                 =
=============================================*/

 :root,
body {
    height: calc(100% - 5px);
    width: 100%;
    margin-top: 0px;
    margin-left: 0px;
    overflow-x: hidden;
    user-select: none;
    --mdc-theme-primary: #4CAF50;
    --mdc-theme-accent: #B0FF59;
    --mdc-theme-background: #fff;
    /* --mdc-theme-text-primary-on-primary: rgba(66, 66, 66, 1); */
    --mdc-theme-text-primary-on-primary: rgba(0, 0, 0, 0.87);
    --mdc-theme-text-secondary-on-primary: rgba(0, 0, 0, 0.54);
    --mdc-theme-text-hint-on-primary: rgba(66, 66, 66, 0.5);
    --mdc-theme-text-disabled-on-primary: rgba(66, 66, 66, 0.5);
    --mdc-theme-text-icon-on-primary: rgba(66, 66, 66, 0.5);
    --mdc-theme-text-primary-on-accent: rgba(66, 66, 66, 1);
    --mdc-theme-text-secondary-on-accent: rgba(66, 66, 66, 0.7);
    --mdc-theme-text-hint-on-accent: rgba(66, 66, 66, 0.5);
    --mdc-theme-text-disabled-on-accent: rgba(66, 66, 66, 0.5);
    --mdc-theme-text-icon-on-accent: rgba(66, 66, 66, 0.5);
}

::-webkit-scrollbar {
    display: none;
}

span,
h1,
h2,
h3,
h4,
h5,
p {
    cursor: default;
}

iframe {
    left: 0px;
    position: fixed;
    top: 56px;
    width: 100%;
    height: calc(100% - 56px);
    overflow: hidden;
}

input[pattern]:invalid {
    color: red;
    border-bottom-color: red !important;
}

header * {
    -webkit-app-region: drag;
}

header .material-icons,
header li {
    -webkit-app-region: no-drag;
}


/*=============================================
=            Material redisgn                 =
=============================================*/

#menu-lower-right {
    float: right;
}

button.footerFab {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

.footerFab * {
    cursor: pointer;
}

.unclickable {
    cursor: default !important;
}

.clickable {
    cursor: pointer !important;
}

#leftClick,
#leftClickButton {
    position: absolute;
}

#menu1 {
    right: 1em;
    top: 1em;
}

#addServerVersion {
    top: 74% !important;
    left: calc(2% - 1px) !important;
}

.white {
    color: white !important;
}

.inline {
    display: flex;
}

.half {
    width: 45%;
    margin: 2.5%;
}

.windowButton {
    margin: 12px 8px 8px 0px !important;
    padding: 3px !important;
    border-radius: 20px;
}

.windowButton:hover {
    color: black !important;
}

#fullscreenBtn {
    background-color: #B0FF59;
    color: #B0FF59;
}

#open_menu {
    background-color: #52B9DB;
    color: #52B9DB;
}

#minimizeBtn {
    background-color: yellow;
    color: yellow;
}

#closeBtn {
    background-color: red;
    color: red;
}

@media screen and (max-device-width:406px) {
    .inline {
        flex-direction: column;
    }
    .half {
        width: 90%;
    }
}

.shown {
    display: block;
    animation-name: entrance;
    animation-duration: 0.2s;
    animation-timing-function: ease-in-out;
}

.noLineHeight {
    line-height: unset;
}

.hidden {
    opacity: 0;
    position: absolute;
    margin-left: -50px;
    animation-name: exit;
    animation-duration: 0.2s;
    animation-timing-function: ease-in-out;
}

.fadeout {
    animation-name: fadeOut;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    transform-style: preserve-3d;
    opacity: 0;
}

@keyframes entrance {
    from {
        margin-left: -50px;
        opacity: 0;
    }
    to {
        margin-left: 0px;
        opacity: 1;
    }
}

@keyframes exit {
    from {
        margin-left: 0px;
        opacity: 1;
        position: relative;
    }
    to {
        margin-left: -50px;
        opacity: 0;
        position: relative;
    }
}

@keyframes fadeOut {
    0% {
        transform: rotateY(0deg) rotateZ(0deg) scale(1);
        opacity: 1;
        border: solid 2px black;
    }
    100% {
        transform: rotateY(360deg) rotateZ(360deg) scale(0.001);
        opacity: 0;
        border: solid 2px black;
    }
}